<template>
  <!-- 产品管理 -->
  <div class="product">
    <!-- 左侧目录树 -->
    <div class="left">
      <leftTree
        :treeData="proTree"
        :leftTreeSelect="leftTreeSelect"
        :createHtml="createHtml"
      />
    </div>
    <!-- 中间分页部分 -->
    <article class="middle_main">
      <!-- tabs -->
      <productTabs
        :tabSearch="tabSearch"
        :proLabels="proLabels"
        v-if="showDetail"
      />
      <!-- list -->
      <productLists
        :imageList="proList"
        :pageNumSearch="pageNumSearch"
        :getIsDetail="getIsDetail"
        :getSelectedId="getSelectedId"
        ref="proLists"
      />
    </article>
    <!-- 右侧关联部分 -->
    <div class="right">
      <!-- 右侧热门内容 -->
      <rightList
        class="right-list"
        v-if="isDetail"
        :hotPic="proListR"
        :browseList="proBrowseListR"
        @setJumpBrowse="setJumpBrowse"
      />
      <!-- 右侧详情 -->
      <rightDetail v-else :proItem="proItem" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import leftTree from "@/components/common/leftTree.vue";
import rightList from "@/components/common/rightList.vue";
import productTabs from "@/components/productInfo/productTabs.vue";
import productLists from "@/components/productInfo/productLists.vue";
import rightDetail from "@/components/common/rightDetail.vue";

export default {
  name: "product",
  components: {
    leftTree,
    rightList,
    productTabs,
    productLists,
    rightDetail,
  },
  data() {
    return {
      tabs: "0",
      isDetail: true,
      checkboxVal: {},
      showDetail: true,
    };
  },
  computed: {
    ...mapState({
      proTree: (state) => state.qbShow.proTree,
      proLabels: (state) => state.qbShow.proLabels,
      proList: (state) => state.qbShow.proList,
      proParams: (state) => state.qbShow.proParams,
      proListR: (state) => state.qbShow.proListR,
      proBrowseListR: (state) => state.qbShow.proBrowseListR,
      proParamsR: (state) => state.qbShow.proParamsR,
      proBrowseR: (state) => state.qbShow.proBrowseR,
      proItem: (state) => state.qbShow.proItem,
    }),
  },
  methods: {
    // 初始化数据
    init() {
      // 左侧树
      this.$store.dispatch("qbShow/getTargetTree");
      // 标签树
      this.$store.dispatch("qbShow/selectLabelGroup");
      this.getAll({ params: this.proParams, tabs: this.tabs });
      this.getAllR({ params: this.proParamsR, tabs: this.tabs });
      this.getBrowseAllR({ params: this.proBrowseR, tabs: this.tabs });
    },
    // 左侧树选取查询
    leftTreeSelect({ targetType }) {
      // 列表
      const proParams = this.proParams;
      proParams.targetType = targetType;
      proParams.pageNum = 1;
      this.getAll({ params: proParams, tabs: this.tabs });
      // 热门内容
      // const proParamsR = this.proParamsR;
      // const proBrowseR = this.proBrowseR;
      // proParamsR.targetType = targetType;
      // proBrowseR.targetType = targetType;
      // this.getAllR({ params: proParamsR, tabs: this.tabs });
      // this.getBrowseAllR({ params: proBrowseR, tabs: this.tabs });
    },
    // 列表头部条件查询全部
    tabSearch({ name, startTime, endTime, categoryIds, tabs, isTabs }) {
      const proParams = this.proParams;
      proParams.name = name;
      proParams.startTime = startTime;
      proParams.endTime = endTime;
      proParams.categoryIds = categoryIds;
      proParams.pageNum = 1;
      // 保存数据 用于其它查询
      this.tabs = tabs;
      this.getAll({ params: proParams, tabs });
      // 头部分类是否改变
      if (isTabs) {
        // 热门内容
        const proParamsR = this.proParamsR;
        const proBrowseR = this.proBrowseR;
        this.getAllR({ params: proParamsR, tabs });
        this.getBrowseAllR({ params: proBrowseR, tabs });
      }
    },
    // 列表 分页查询
    pageNumSearch({ pageNum }) {
      const proParams = this.proParams;
      proParams.pageNum = pageNum;
      this.getAll({ params: proParams, tabs: this.tabs });
    },

    // 查询列表
    getAll({ params, tabs }) {
      this.$store.dispatch("qbShow/getAll", { params, tabs });
    },
    // 查询热门内容R
    getAllR({ params, tabs }) {
      this.$store.dispatch("qbShow/getAllR", { params, tabs });
    },
    getBrowseAllR({ params, tabs }) {
      this.$store.dispatch("qbShow/getBrowseAllR", { params, tabs });
    },
    // 右侧展示列表or详情
    getIsDetail({ isDetail, visiable }) {
      this.isDetail = isDetail;
      this.showDetail = visiable;
    },
    // 获取选中的文件
    getSelectedId({ checkboxVal }) {
      // console.log(checkboxVal);
      this.checkboxVal = checkboxVal;
    },
    // 导出目录
    createHtml({ checkedKeys = [], handleClose }) {
      // 新改部分
      let params = {
        list: [],
      };
      if (Object.keys(this.checkboxVal).length <= 0) {
        checkedKeys.forEach((element) => {
          params.list.push({
            connectionType: 0,
            id: 0,
            sfqx: 2,
            targetType: element,
          });
        });
      } else {
        let choosedTarget = [];
        for (let key in this.checkboxVal) {
          if (this.checkboxVal[key]) {
            const obj = {};
            // 判断是否全选  正常是0,全不选是2
            let checkboxVal_length = Object.keys(key).length;
            let connectionType = key.split("-")[1];
            let id = key.split("-")[2];
            let targetType = key.split("-")[0];
            choosedTarget.push(targetType);
            obj.connectionType = connectionType ? connectionType : 0;
            obj.id = id ? id : 0;
            obj.targetType = targetType ? targetType : "";
            obj.sfqx = checkboxVal_length == 0 ? 2 : 0;
            params.list.push(obj);
          }
        }
        // 目标树选中多选没有对应选择图片视频的情况
        // console.log(123, checkedKeys);
        // console.log(456, key);
        checkedKeys.forEach((element) => {
          if (choosedTarget.indexOf(element) == -1) {
            params.list.push({
              connectionType: 0,
              id: 0,
              sfqx: 2,
              targetType: element,
            });
          }
        });
      }
      // console.log(789, params);

      // 旧逻辑
      // const _checkboxVal = {};
      // console.log(this.checkboxVal);
      // for (let key in this.checkboxVal) {
      //   // 筛选选中的文件
      //   if (this.checkboxVal[key]) {
      //     _checkboxVal[key] = this.checkboxVal[key];
      //   }
      // }
      // const checkboxVal = Object.keys(_checkboxVal);
      // console.log(6767875845, checkboxVal, checkedKeys);

      // const params = {};
      // // 判断是否选取文件
      // if (checkboxVal.length > 0) {
      //   // 导出选中目标下 选中的图像和视频（不包含文档）
      //   checkboxVal.forEach((info) => {
      //     const strs = info.split("-");
      //     if (!params[strs[0]]) {
      //       params[strs[0]] = {};
      //     }
      //     if (!params[strs[0]][strs[1]]) {
      //       params[strs[0]][strs[1]] = "";
      //     }
      //     params[strs[0]][strs[1]] += strs[2] + ",";
      //   });
      //   // 去掉最后面的逗号
      //   for (let key in params) {
      //     if (params[key]["2"]) {
      //       const str = params[key]["2"] + "";
      //       params[key]["2"] = str.substring(0, str.length - 1);
      //     }
      //     if (params[key]["3"]) {
      //       const str = params[key]["3"] + "";
      //       params[key]["3"] = str.substring(0, str.length - 1);
      //     }
      //   }
      // } else {
      //   // 导出选中目标下全部图像和视频（不包含文档）
      //   checkedKeys.forEach((info) => {
      //     params[info] = {
      //       2: "",
      //       3: "",
      //     };
      //   });
      // }

      // console.log(params, handleClose);
      // this.$api.getTargetTree().then((res) => {
      //   // console.log(res, checkboxVal);
      //   // let arr = res.list.map((item) => {
      //   //   const checkboxVal = Object.keys(_checkboxVal);
      //   //   item.id != Number(checkboxVal[0].split("-").shift);
      //   // });
      //   for (let i = 0; i < res.list.length; i++) {
      //     const checkboxVal = Object.keys(_checkboxVal);
      //     // console.log(checkboxVal);
      //     for (let w = 0; w < checkboxVal.length; w++) {
      //       // console.log(Number(checkboxVal[0].split("-").shift()));
      //       if (res.list[i].zbnm != checkboxVal[w].split("-").shift()) {
      //         // console.log(res.list[i].id, checkedKeys);

      //         if (checkedKeys.indexOf(res.list[i].zbnm) != -1) {
      //           let arr = [];
      //           arr.push(res.list[i].zbnm);
      //           let obj = { ...params };

      //           for (let j = 0; j < arr.length; j++) {
      //             obj[arr[j]] = {};
      //           }
      //           // console.log(obj);
      //           this.$store
      //             .dispatch("qbShow/createHtml", {
      //               obj,
      //               handleClose,
      //               router: this.$router,
      //             })
      //             .then(() => {
      //               console.log(123);
      //             });
      //           // let obj={
      //           // ...params,

      //           // }
      //           // console.log(obj);
      //         } else {
      //           let obj = { ...params };
      //           // console.log(obj);
      //           this.$store.dispatch("qbShow/createHtml", {
      //             obj,
      //             handleClose,
      //             router: this.$router,
      //           });
      //         }
      //       }
      //     }
      //   }
      // });

      // let obj = { ...params };
      this.$store.dispatch("qbShow/createHtml", {
        obj: params,
        handleClose,
        router: this.$router,
      });
    },
    setJumpBrowse(e, i) {
      // console.log(e, i);
      this.$refs.proLists.getImageDetail(e, i);
    },
    getDetail(e) {
      this.showDetail = e;
    },
  },
  created() {
    this.init();
    // console.log(this.proList);
  },
};
</script>

<style lang="scss" scoped>
.product {
  // width: 100vw;
  position: relative;
  top: 10vh;
  padding: 0.1rem 0.1rem;
  display: flex;
  height: 90vh;
  //  左侧侧边栏
  .left {
    width: 3rem;
    height: 100%;
    background: url(~@/assets/showDataSubystem/left.png) no-repeat;
    background-size: 100% 107%;
    padding: 0 0.2rem;
    font-size: 0.16rem;
  }

  //   中间内容区域
  .middle_main {
    width: calc(100% - 6.5rem);
    background: url(~@/assets/showDataSubystem/center.png) no-repeat;
    background-size: 100% 107%;
    margin-top: -0.3rem;
    // margin-left: 0.1rem;
    padding: 0.1rem 0.1rem 0.2rem;
  }
  .right {
    padding: 0 0.1rem;
    width: 3.5rem;
    margin-top: -0.27rem;
    background: url(~@/assets/showDataSubystem/right.png) no-repeat;
    background-size: 100% 108%;
    // background-position: center;
    font-size: 0.12rem;
    color: white;
    position: absolute;
    right: 0.1rem;
    height: 100%;
    .right-list {
      padding: 0.1rem;
    }
  }
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    background: #2a9dff;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(29, 25, 83, 0.5);
  }
}
</style>